<script lang="ts" setup>
    const changeHandler = (data: any): void =>
    {
        log(data);
    };
</script>

<template>
    <!-- 复选框 -->
    <u-layout
        :enable-refresh="false"
        title="复选框组件示例"
    >
        <!-- 容器 -->
        <view class="container">
            <view class="line">
                <u-text text="普通复选框" />
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-checkbox
                                :checked="false"
                                label="水果"
                                @change="changeHandler"
                            />
                        </view>
                    </view>
                </view>
            </view>

            <view class="line">
                <u-text text="圆形复选框" />
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-checkbox
                                shape="circle"
                                label="水果"
                                @change="changeHandler"
                            />
                        </view>
                    </view>
                </view>
            </view>

            <view class="line">
                <u-text text="禁用复选框（未选中）" />
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-checkbox
                                :checked="false"
                                :disabled="true"
                                label="水果"
                                @change="changeHandler"
                            />
                        </view>
                    </view>
                </view>
            </view>

            <view class="line">
                <u-text text="禁用复选框（选中）" />
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-checkbox
                                :checked="true"
                                :disabled="true"
                                label="水果"
                                @change="changeHandler"
                            />
                        </view>
                    </view>
                </view>
            </view>

            <view class="line">
                <u-text text="自定义Label颜色" />
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-checkbox
                                label="水果"
                                label-color="#ff0000"
                                @change="changeHandler"
                            />
                        </view>
                    </view>
                </view>
            </view>

            <view class="line">
                <u-text text="自定义图标颜色" />
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-checkbox
                                icon-color="#ff0000"
                                label="水果"
                                @change="changeHandler"
                            />
                        </view>
                    </view>
                </view>
            </view>

            <view class="line">
                <u-text text="自定义图标以及激活和未激活颜色" />
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-checkbox
                                active-color="#fff000"
                                icon-color="#ff0000"
                                inactive-color="#f3f3f3"
                                label="水果"
                                @change="changeHandler"
                            />
                        </view>
                    </view>
                </view>
            </view>

            <view class="line">
                <u-text text="自定义图标以及激活和未激活颜色（禁用未激活）" />
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-checkbox
                                :disabled="true"
                                active-color="#fff000"
                                icon-color="#ff0000"
                                inactive-color="#f3f3f3"
                                label="水果"
                                @change="changeHandler"
                            />
                        </view>
                    </view>
                </view>
            </view>

            <view class="line">
                <u-text text="自定义图标以及激活和未激活颜色（禁用已激活）" />
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-checkbox
                                :checked="true"
                                :disabled="true"
                                active-color="#fff000"
                                icon-color="#ff0000"
                                inactive-color="#f3f3f3"
                                label="水果"
                                @change="changeHandler"
                            />
                        </view>
                    </view>
                </view>
            </view>

            <view class="line">
                <u-text text="自定义图标以及激活和未激活颜色（禁用已激活）" />
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-checkbox
                                :checked="true"
                                :disabled="true"
                                active-color="#fff000"
                                icon-color="#ff0000"
                                inactive-color="#f3f3f3"
                                label="水果"
                                @change="changeHandler"
                            />
                        </view>
                    </view>
                </view>
            </view>

            <view class="line">
                <u-text text="复选框组" />
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-checkbox-group
                                :value="['egg']"
                                :options="[
                                    {
                                        label: '水果',
                                        value: 'fruit',
                                        disabled: true
                                    },
                                    {
                                        label: '蔬菜',
                                        value: 'vegetable'
                                    },
                                    {
                                        label: '肉类',
                                        value: 'meat'
                                    },
                                    {
                                        label: '蛋类',
                                        value: 'egg'
                                    },
                                    {
                                        label: '鱼类',
                                        value: 'fish'
                                    }
                                ] as CheckboxGroupInterface[]"
                                @change="changeHandler"
                            />
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <!-- //容器 -->
    </u-layout>
    <!-- //复选框 -->
</template>

<style lang="scss" scoped>
    // 容器
    .container
    {
        .line
        {
            .title
            {
                font-size: 14px;
                line-height: 20px;
            }

            .block
            {
                overflow: hidden;
                margin-top: 4px;
            }

            &:not(:first-child)
            {
                margin-top: 16px;
            }
        }
    }
</style>